import { useState } from "react";
import "./index.css";
import classNames from "classnames";

function StyleClass() {
  const [isRed, setIsRed] = useState(false);

  const changeColor = () => {
    setIsRed(!isRed);
  };

  return (
    <>
      <div>
        {/* <div className={`box ${isRed ? "box-active" : ""}`}>Hello</div> */}
        <div className={classNames("box", { "box-active": isRed })}>Hello</div>
        <button onClick={changeColor}>切换样式</button>
      </div>
    </>
  );
}

export default StyleClass;
